<!DOCTYPE html>
<html>
<title>在线抽奖程序</title>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/choujiang.css"/>
        <script type="text/javascript" src="js/jquery-1.7.2-min.js"></script>
    <script type="text/javascript" src="js/jquery.hotkeys.js"></script>
</head>
<script type="text/javascript">
	var chujiang = false;
    var alldataarr ;//手机号数组
    var num = 0 ;//手机号数量
    var timer
    var rnd ;//抽中的下标

    //改变手机号
    function change(){
        rnd =  GetRnd(0,num);
        $('#oknum').html(alldataarr[rnd]);
    }
    
    //开始抽奖
    function start(){
        clearInterval(timer);
        timer = setInterval('change()',10);
    }

    //停止
    function end(){
        clearInterval(timer);
        alldataarr.splice(rnd,1);//删除已经抽中的
        num = alldataarr.length-1 ;
        $('#showresult').prepend("<li><p>"+$('#oknum').html()+"</p></li>");
    }
    
    //获取随机数
    function GetRnd(min,max){
        return parseInt(Math.random()*(max-min+1));
    }


    //获取所有手机号
    function get_phones(){
		$.ajax( {
			url : 'vote_user_phones',
			type : 'post' ,
			datatype : 'json' , 
			async: false , 	//同步
			success : function(data ){
				if(data!=''){
					alldataarr = data.split(",");
					num = alldataarr.length-1 ;
					
				}else{
					alert("没有可抽奖的手机号!");
				}
				console.log(data);
			} ,
			error : function(){
				console.info( '获取投票人的手机号失败!' );							}
			});
	}
    
$(document).ready(function(){
	get_phones();
	$(document).bind('keydown', 'space',function (evt){
        if(chujiang == true){ 
            chujiang = false;
			$('#music').attr('src','images/end.mp3');			 
			$('#music').removeAttr('loop');	
			end();
         }else{ 
             if(num<0){
				$('#oknum').html('号码已抽完');
             }else{
            	 chujiang = true;
     			$('#music').attr('src','images/start.wav');
     			$('#music').attr('loop','loop');
     			start();
             }              
         } 
     });
});
    

 
</script>
<body>

<div class="box"> 
    <div id="weizhi"> 
        <div><h1></h1></div>
        <div class="gundongqu_left">
            <h2>抽奖滚动区</h2>
             
            <div>
                <ul id="shouji" >
                    <li id="oknum">18888888888</li>
                </ul>
            </div>
            
        </div>
        <div class="gundongqu_right">
            <h2>恭喜以下中奖人员</h2>
            <div class="zhongjiangquyu">
                <span>序号</span>
                <span>中奖号码</span>
                    <div id="gundongtiao">
                        <div id="haoma">
                            <ul id="showresult">
                            </ul>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>

<audio id="music"   autoplay="autoplay"  loop="loop">你的浏览器不支持audio标签。</audio>  
</body>
</html>
